import React, { useEffect, useState } from 'react'

export default function App() {

  //使用useState给函数式组件添加状态,并保存数据
  const [person,setPerson] = useState([
    {id: "001",name: "张三"},
    {id: "002",name: "张四"},
    {id: "003",name: "张五"},
    {id: "004",name: "张六"}
  ])

  //利用useEffect给函数式组件添加生命周期

  useEffect(()=>{
    const timer = setTimeout(()=>{
      console.log("我执行了一次");
    },100)
    return ()=>{
      clearInterval(timer)
    }
  },[])



  const addPerson = ()=>{
    return setPerson([...person,{id: Date.now(),name: "张七"}])
  }


  return (
    <div>
      {
        person.map(item=>{
          return <p key={item.id}>{item.name}</p>
        })
      }

      <hr />

      <button onClick={addPerson}>添加成员</button>

    </div>
  )
}

